<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">

        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-progressbars.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-progressbars.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-progressbars.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-progressbars.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">进度条</h4>
                <p class="text-muted page-title-alt">欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <div class="row justify-content-around">
                        <div class="col-sm-5">
                            <h4 class="header-title m-t-0"><b>基本的例子</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                默认进度条.
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress m-b-5">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 col-sm-offset-1">
                            <h4 class="header-title m-t-0"><b>条纹的例子</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用渐变创建条纹效果 <code>.progress-bar-striped</code>.
                            </p>

                            <div class="progress">
                                <div class="progress-bar progress-bar-custom progress-bar-striped" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-pink progress-bar-striped" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-purple progress-bar-striped" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress m-b-5">
                                <div class="progress-bar progress-bar-inverse progress-bar-striped" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of Row -->



        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <div class="row justify-content-around">
                        <div class="col-sm-5">
                            <h4 class="header-title m-t-0"><b>尺寸示例</b></h4>
                            <p class="text-muted m-b-30 font-13">
                               使用类 <code>.progress-sm</code>,<code>.progress-md</code> 和 <code>.progress-lg</code>.
                            </p>
                            <div class="progress progress-sm">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width: 89%;">
                                    <span class="sr-only">89% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
                                    <span class="sr-only">77% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-md">
                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-lg m-b-5">
                                <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%;">
                                    <span class="sr-only">67% Complete</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 col-sm-offset-1">
                            <h4 class="header-title m-t-0"><b>动画示例</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                添加 <code>.active</code> 到 <code>.progress-bar-striped</code> 从左到右的条纹动画.
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-pink progress-bar-striped active" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress m-b-5">
                                <div class="progress-bar progress-bar-purple progress-bar-striped active" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of Row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <div class="row justify-content-around">
                        <div class="col-sm-5">
                            <h4 class="header-title m-t-0"><b>完成的例子</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                从进度条内 删除带有 <code>.sr-only</code> 的 <code>&lt;span&gt;</code> 以显示可见的百分比.
                            </p>
                            <div class="progress progress-md">
                                <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
                                    85%
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="width: 56%;">
                                    56%
                                </div>
                            </div>
                            <div class="progress progress-lg m-b-5">
                                <div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100" style="width: 96%;">
                                    96%
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 col-sm-offset-1">
                            <h4 class="header-title m-t-0"><b>堆积的例子</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                放置多个酒吧到相同 <code>.progress</code> 的堆叠他们.
                            </p>
                            <div class="progress">
                                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;" class="progress-bar progress-bar-success progress-bar-striped"></div>
                                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" class="progress-bar progress-bar-info"></div>
                                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" class="progress-bar progress-bar-warning progress-bar-striped active"></div>
                                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" class="progress-bar progress-bar-danger progress-bar-striped active"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of Row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <div class="row justify-content-around">
                        <div class="col-sm-5">
                            <h4 class="header-title m-t-0"><b>动画示例</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用类 <code>.wow</code>,<code>.animated</code> 和 <code>.progress-animated</code>.
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-primary wow animated progress-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-pink wow animated progress-animated" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info wow animated progress-animated" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
                                    <span class="sr-only">82% Complete</span>
                                </div>
                            </div>
                            <div class="progress m-b-5">
                                <div class="progress-bar progress-bar-purple wow animated progress-animated" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 col-sm-offset-1">
                            <h4 class="header-title m-t-0"><b>动画条纹的例子e</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用类 <code>.wow</code>,<code>.animated</code>,<code>.progress-bar-striped</code> 和 <code>.progress-animated</code>.
                            </p>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped progress-animated wow animated" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                                    <span class="sr-only">48% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning progress-bar-striped progress-animated wow animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-inverse progress-bar-striped progress-animated wow animated" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
                                    <span class="sr-only">95% Complete</span>
                                </div>
                            </div>
                            <div class="progress m-b-5">
                                <div class="progress-bar progress-bar-danger progress-bar-striped progress-animated wow animated" role="progressbar" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100" style="width: 81%;">
                                    <span class="sr-only">81% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of Row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">

                    <div class="row justify-content-around">
                        <div class="col-sm-5">
                            <h4 class="header-title m-t-0"><b>进度栏垂直</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用类 <code>.progress-vertical</code>.
                            </p>
                            <div class="progress progress-sm progress-vertical">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="height: 89%;">
                                    <span class="sr-only">89% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-vertical">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="height: 77%;">
                                    <span class="sr-only">77% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-md progress-vertical">
                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 45%;">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-lg progress-vertical m-b-5">
                                <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="height: 67%;">
                                    <span class="sr-only">67% Complete</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5 col-sm-offset-1">
                            <h4 class="header-title m-t-0"><b>进度条垂直底部</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                使用类 <code>.progress-vertical-bottom</code>.
                            </p>
                            <div class="progress progress-sm progress-vertical-bottom">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="height: 89%;">
                                    <span class="sr-only">89% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-vertical-bottom">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="height: 77%;">
                                    <span class="sr-only">77% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-md progress-vertical-bottom">
                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="height: 45%;">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                            <div class="progress progress-lg progress-vertical-bottom m-b-5">
                                <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="height: 67%;">
                                    <span class="sr-only">67% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of Row -->

         <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>